<template>
  <div class="club-card" @click="handleClick">
    <div class="club-logo" :style="logoStyle">
      <span v-if="!club.logo">{{ clubInitials }}</span>
    </div>
    <div class="club-info">
      <div class="club-name">{{ club.name }}</div>
      <div class="club-description">{{ truncatedDescription }}</div>
      <div class="club-meta">
        <span class="club-members">
          <i class="el-icon-user"></i> {{ club.memberCount || 0 }}人
        </span>
        <span class="club-category" v-if="club.category">
          <i class="el-icon-collection-tag"></i> {{ club.category }}
        </span>
        <span class="club-status" :class="statusClass" v-if="club.recruitmentStatus !== undefined">
          {{ club.recruitmentStatus ? '招新中' : '未招新' }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ClubCard',
  props: {
    club: {
      type: Object,
      required: true
    },
    clickable: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    truncatedDescription() {
      if (!this.club.description) return '暂无描述';
      return this.club.description.length > 60
        ? this.club.description.substring(0, 60) + '...'
        : this.club.description;
    },
    clubInitials() {
      if (!this.club.name) return '';
      return this.club.name.charAt(0);
    },
    logoStyle() {
      return {
        backgroundImage: this.club.logo ? `url(${this.club.logo})` : null,
        backgroundColor: this.club.logo ? 'transparent' : this.getRandomColor(this.club.id || this.club.name),
      };
    },
    statusClass() {
      return {
        'status-recruiting': this.club.recruitmentStatus,
        'status-closed': !this.club.recruitmentStatus
      };
    }
  },
  methods: {
    getRandomColor(seed) {
      const colors = [
        '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
        '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50',
        '#8bc34a', '#cddc39', '#ffc107', '#ff9800', '#ff5722'
      ];
      
      // 使用简单的哈希函数为社团生成一致的颜色
      let hash = 0;
      const str = String(seed);
      for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
      }
      
      return colors[Math.abs(hash) % colors.length];
    },
    handleClick() {
      if (this.clickable) {
        this.$emit('click', this.club);
      }
    }
  }
};
</script>

<style scoped>
.club-card {
  display: flex;
  padding: 16px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.club-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.club-logo {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin-right: 16px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  font-weight: bold;
}

.club-info {
  flex: 1;
  overflow: hidden;
}

.club-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.club-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.club-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  color: #999;
}

.club-meta > span {
  margin-right: 16px;
  display: flex;
  align-items: center;
}

.club-meta i {
  margin-right: 4px;
}

.club-status {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.status-recruiting {
  background-color: #ecf5ff;
  color: #409eff;
}

.status-closed {
  background-color: #f4f4f5;
  color: #909399;
}
</style> 